<template>
  <div class="p-4">
    <!-- 顶部工具栏：搜索 + 发布按钮 -->
    <div class="flex justify-between items-center mb-4">
      <!-- 搜索栏 -->
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="关键词">
          <el-input
            v-model="searchForm.keyword"
            placeholder="搜索种子标题..."
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 发布种子按钮 -->
      <el-button type="success" @click="goToCreate">
        发布种子
      </el-button>
    </div>

    <!-- 种子列表表格 -->
    <el-table :data="seedList" border style="width: 100%">
      <el-table-column prop="title" label="种子标题" />
      <el-table-column prop="size" label="大小" width="120" />
      <el-table-column prop="uploader" label="上传者" width="150" />
      <el-table-column prop="uploadTime" label="上传时间" width="180" />
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            @click="goToDetail(scope.row.id)"
          >查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      class="mt-4 text-center"
      background
      layout="prev, pager, next"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      @current-change="handlePageChange"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
// import { getSeedList } from '@/api/torrent'; // 后端接入后解开注释

const router = useRouter();

const searchForm = ref({
  keyword: "",
});

const seedList = ref([]);
const pagination = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0,
});

// 模拟数据
const mockData = [
  {
    id: 1,
    title: "Ubuntu 22.04 镜像",
    size: "2.5 GB",
    uploader: "admin",
    uploadTime: "2025-05-18 12:00",
  },
  {
    id: 2,
    title: "Node.js 教程视频合集",
    size: "4.2 GB",
    uploader: "user1",
    uploadTime: "2025-05-17 20:30",
  },
];

const fetchData = async () => {
  // const res = await getSeedList({ page: pagination.value.currentPage, keyword: searchForm.value.keyword });
  // seedList.value = res.data.list;
  // pagination.value.total = res.data.total;

  seedList.value = mockData;
  pagination.value.total = 2;
};

const handleSearch = () => {
  pagination.value.currentPage = 1;
  fetchData();
};

const resetSearch = () => {
  searchForm.value.keyword = "";
  fetchData();
};

const handlePageChange = (page) => {
  pagination.value.currentPage = page;
  fetchData();
};

const goToDetail = (id) => {
  router.push(`/detail/${id}`);
};

const goToCreate = () => {
  router.push("/create");
};

onMounted(() => {
  fetchData();
});
</script>

<style scoped>
.el-form-item {
  margin-right: 16px;
}
</style>
